<!--
 * @Description: 工序拆单
 * 
 * @Author: XiongYaoYuan<xiongyaoyuan>
 * @Date: 2023-08-17 20:45:37
 * @FilePath: /yuxiuproweb/src/views/split/cm/mods/production.vue
-->
<template>
  <el-drawer
    title="工序拆单"
    size="100%"
    :visible.sync="shows"
    v-loading="loading"
  >
    <el-form ref="form" :model="form" label-width="100px">
      <el-card class="box-card grid-box-card" shadow="hover">
        <div slot="header">
          <span class="title">基础数据</span>
        </div>

        <el-descriptions class="margin-top" :column="3" border>
          <el-descriptions-item>
            <template slot="label"> 订单信息 </template>
            {{ form.name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 订单状态 </template>
            {{ form.salesModel || "-" }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 品名 </template>
            {{ form.name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 墙宽 </template>
            {{ form.wright }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 高度 </template>
            {{ form.height }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 产品加工信息 </template>
            {{ form.processingRemarks }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 销售备注 </template>
            {{ data.salesRemark }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
      <el-card
        class="box-card grid-box-card"
        style="margin-top: 20px"
        shadow="hover"
      >
        <div slot="header">
          <span class="title">物料列表</span>
        </div>
        <div class="process-view">
          <div
            class="process-item"
            v-for="item in this.processList"
            :key="item.processId"
          >
            <div class="process-item-title">{{ item.name }}</div>
            <div class="process-item-cells">
              <div
                :class="[
                  'process-cell',
                  { 'process-cell-select': cell.processNumber > 0 },
                ]"
                v-for="cell in item.children"
                :key="cell.processId"
              >
                <div class="process-cell-title">
                  {{ cell.name }}
                </div>
                <div class="process-cell-input">
                  <el-input-number
                    v-model="cell.processNumber"
                    controls-position="right"
                    size="mini"
                    :min="0"
                    :precision="0"
                    style="width: 100%"
                  ></el-input-number>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </el-form>
    <div class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="shows = false">取 消</el-button>
    </div>
  </el-drawer>
</template>

<script>
import {
  getProduct,
  getProductFabricList,
  updateProduct,
  getProcessList,
  updateProcessList,
} from "@/api/split/cm";
import { listMachining } from "@/api/process/machine";
import { listMethod } from "@/api/process/way";

import { listProcess } from "@/api/process/production";
import { delDepartTree } from "@/views/process/production/helper.js";

export default {
  dicts: [
    "order_curtain_section",
    "md_complex_machining_model_part_1",
    "md_complex_machining_model_part_2",
  ],
  props: {
    show: Boolean,
    data: {
      type: Object,
    },
  },
  data() {
    return {
      loading: false,
      form: {},
      modelFabricList: [],
      machiningList: [],
      methodList: [],

      processList: [],
      productProcessSubmitList: [],
    };
  },
  computed: {
    shows: {
      get() {
        return this.show;
      },
      set(newValue) {
        this.$emit("update:show", newValue);
      },
    },
  },
  async created() {
    this.loading = true;
    this.getProductData();
    //   this.getProductFabricList();
    this.getMachiningList();
    this.getMethodList();

    await this.getProcessListData();

    // await this.getProcessList();
    this.getProductProcessList();
  },
  methods: {
    async getProcessListData() {
      const { data } = await getProcessList({
        productId: this.data.productId,
      });
      this.ProductProcessSubmitList = data || [];
    },

    /** 查询工序模型列表 */
    getProcessList() {
      listProcess({
        pageNum: 1,
        pageSize: 5000,
      }).then(({ rows }) => {
        this.processList = delDepartTree(
          rows.map((e) => ({
            ...e,
            processId: `${e.processId}`,
            processNumber: 0,
          }))
        );
      });
    },

    // 查询
    getProductProcessList() {
      listProcess({
        pageNum: 1,
        pageSize: 5000,
      }).then(({ rows }) => {
        this.processList = delDepartTree(
          rows.map((e) => ({
            ...e,
            processId: `${e.processId}`,
            processNumber:
              this.ProductProcessSubmitList?.find(
                (v) => `${v.processId}` === `${e.processId}`
              )?.processNumber || 0,
            productionRecordId:
              this.ProductProcessSubmitList?.find(
                (v) => `${v.processId}` === `${e.processId}`
              )?.productionRecordId || "",
          }))
        );
        this.loading = false;
      });
    },

    submitForm() {
      let submitProcessList = [];
      this.processList?.forEach((e) => {
        if (e?.children?.length) {
          e?.children?.forEach((v) => {
            if (v.processNumber > 0) {
              submitProcessList.push(v);
            }
          });
        }
      });
      const productProcessList = submitProcessList?.map((e) => {
        return {
          processNumber: e.processNumber,
          type: "CM",
          price: e.price,
          productId: this.data.productId,
          processId: e.processId,
          processName: e.name,
        };
      });
      this.loading = true;
      updateProcessList(productProcessList).then((res) => {
        this.$modal.msgSuccess("保存成功");
        this.shows = false;
        this.loading = false;
      });
    },

    getMachiningList() {
      listMachining({
        pageNum: 1,
        pageSize: 5000,
      }).then(({ rows }) => {
        this.machiningList = rows;
      });
    },
    getProductData() {
      getProduct(this.data.productId).then(({ data }) => {
        this.form = data;
      });
    },
    getProductFabricList() {
      getProductFabricList(this.data.productId).then(({ data }) => {
        this.modelFabricList = data;
      });
    },
    getComplexMachiningName(ids) {
      const idList = ids?.split(",");
      return (
        this.machiningList
          ?.filter((e) => idList?.includes(e.mdComplexMachiningId))
          ?.map((e) => e.complexMachiningName)
          ?.join() || ""
      );
    },
    getMethodList() {
      listMethod({
        pageNum: 1,
        pageSize: 5000,
      }).then(({ rows }) => {
        this.methodList = rows;
      });
    },
    getProcessingMethodName(id) {
      return (
        this.methodList?.find((e) => e.processingMethodId)
          ?.processingMethodName || ""
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.box-card {
  margin: 0 20px;
}
.drawer-form {
  ::v-deep {
    .el-form-item {
      margin-bottom: 0;
      margin-right: 0;
      input {
        text-align: left;
      }
    }
    .el-collapse-item__header {
      height: 65px;
      line-height: 65px;
      font-size: 16px;
    }
  }
}

.process-view {
  width: 100%;
  padding: 0 10px;
  display: flex;
  align-items: flex-start;
  overflow-y: hidden;
  flex-wrap: nowrap;
  .process-item {
    width: 110px;
    text-align: center;
    border-radius: 5px;
    background-color: #eee;
    margin-right: 10px;
    padding: 5px;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16);
    list-style: none;
    white-space: nowrap;
    &-title {
      font-size: 16px;
      font-weight: bold;
      padding: 5px 0;
    }
    &-cells {
      width: 100px;
      .process-cell {
        background-color: #fff;
        padding: 5px;
        border-radius: 5px;
        margin-bottom: 5px;
        &:last-child {
          margin-bottom: 0;
        }
        &-title {
          font-size: 13px;
        }
        &-input {
          margin-top: 5px;
        }
      }
      .process-cell-select {
        background-color: #1890ff;
      }
    }
  }
}
.dialog-footer {
  display: flex;
  justify-content: right;
  margin: 20px;
}
</style>
